<template>
	<view style="width: 100%;">
		<u-grid :col="getColumCount()" :border="false" style="">
			<u-grid-item @click="previewimage(index)" :customStyle="customStyle" v-for="(item,index) in list" style="">
				<image :src="item" style="width: 100%;" mode="widthFix"></image>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				customStyle:{
					padding:'5rpx'
				}
			}
		},
		props:{
			list:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		mounted() {
			
		},
		methods:{
			getColumCount(){
				const l = this.list.length
				if(l == 1){
					return 1
				}else if(l <= 4){
					return 2
				}else if(l <= 9){
					return 3
				}else {
					return 4
				}
			},
			previewimage:function(e){
				uni.previewImage({
					urls:this.list,
					current:e
				})
			}
		}
	}
</script>

<style>
</style>